<template>
	<view class="container">
		<next-indexed-xlist :dataList="dataList" :showAvatar="true" @itemclick="itemclick">
			<!--这是默认插槽,额外添加部分-->
			<view class="content-block">
				<view class="title"><text>历史记录:</text></view>
				<view class="btn"><text>朝阳区</text></view>
				<view class="btn"><text>东城区</text></view>
				<view class="btn"><text>海淀区</text></view>
			</view>
		</next-indexed-xlist>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [{
					"id": 6,
					"code": "110101000000",
					"name": "东城区",
					"parentCode": "110100000000",
					"level": 3,
					"abbr": "DC",
					"deleted": 0
				}, {
					"id": 10,
					"code": "110105000000",
					"name": "朝阳区",
					"parentCode": "110100000000",
					"level": 3,
					"abbr": "CY",
					"deleted": 0
				}, {
					"id": 13,
					"code": "110106000000",
					"name": "丰台区",
					"parentCode": "110100000000",
					"level": 3,
					"abbr": "FT",
					"deleted": 0
				}, {
					"id": 14,
					"code": "110107000000",
					"name": "石景山区",
					"parentCode": "110100000000",
					"level": 3,
					"abbr": "SJS",
					"deleted": 0
				}, {
					"id": 15,
					"code": "110108000000",
					"name": "海淀区",
					"parentCode": "110100000000",
					"level": 3,
					"abbr": "HD",
					"deleted": 0
				}, {
					"id": 16,
					"code": "110109000000",
					"name": "门头沟区",
					"parentCode": "110100000000",
					"level": 3,
					"abbr": "MTG",
					"deleted": 0
				}, {
					"id": 19,
					"code": "110111000000",
					"name": "房山区",
					"parentCode": "110100000000",
					"level": 3,
					"abbr": "FS",
					"deleted": 0
				}, {
					"id": 20,
					"code": "110112000000",
					"name": "通州区",
					"parentCode": "110100000000",
					"level": 3,
					"abbr": "TZ",
					"deleted": 0
				}, {
					"id": 21,
					"code": "110113000000",
					"name": "顺义区",
					"parentCode": "110100000000",
					"level": 3,
					"abbr": "SY",
					"deleted": 0
				}, {
					"id": 22,
					"code": "110114000000",
					"name": "昌平区",
					"parentCode": "110100000000",
					"level": 3,
					"abbr": "CP",
					"deleted": 0
				}, {
					"id": 23,
					"code": "110115000000",
					"name": "大兴区",
					"parentCode": "110100000000",
					"level": 3,
					"abbr": "DX",
					"deleted": 0
				}, {
					"id": 25,
					"code": "110116000000",
					"name": "怀柔区",
					"parentCode": "110100000000",
					"level": 3,
					"abbr": "HR",
					"deleted": 0
				}, {
					"id": 26,
					"code": "110117000000",
					"name": "平谷区",
					"parentCode": "110100000000",
					"level": 3,
					"abbr": "PG",
					"deleted": 0
				}, {
					"id": 27,
					"code": "110118000000",
					"name": "密云区",
					"parentCode": "110100000000",
					"level": 3,
					"abbr": "MY",
					"deleted": 0
				}, {
					"id": 28,
					"code": "110119000000",
					"name": "延庆区",
					"parentCode": "110100000000",
					"level": 3,
					"abbr": "YQ",
					"deleted": 0
				}]
			}
		},
		methods: {
			itemclick(e) {
				console.log('点击列表回调：', e)
			}
		}
	}
</script>

<style lang="scss">
	.content-block {
	        display: flex;
	        flex-direction: row;
	        justify-content: flex-start;
	        background-color: #fff;
	        .title {
	            color: #333;
	            padding: 20rpx;
	            margin-right: 20rpx;
	            display: flex;
	            flex-direction: column;
	            justify-content: center;
	        }
	        .btn {
	            color: #ccc;
	            padding: 10rpx;
	            border: 1rpx solid #ccc;
	            border-radius: 10rpx;
	            margin: 20rpx 10rpx;
	            font-size: 28rpx;
	            display: flex;
	            flex-direction: column;
	            justify-content: center;
	
	        }
	    }
</style>